<template>
	<view>
		<tui-navigation-bar :isFixed="true" :isOpacity="true" splitLine :zIndex="99999" :scrollTop="0" title="" backgroundColor="transparent" color="#333">
			<view style="height: 40px;display: flex;align-items: center;">
				<view style="width: 15rpx;" @click="handleBack"></view>
				<image v-if="share" @click="handleToIndex" src="https://static.wddzq.com/static/shouye-xuanzhong.png" style="width: 30rpx;height: 30rpx;padding: 15rpx;background-color: #f2f2f2;border: 2rpx solid #ddd;border-radius: 50%;" />
				<u-icon v-else name="arrow-left" size="45" color="#fff" @click="handleBack"></u-icon>
				<text style="font-size: 28rpx;color: #fff;" ></text>
			</view>
		</tui-navigation-bar>
		<swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :interval="5000">
			<swiper-item v-for="item in (detail?.photoListV2?.split('|') || [])">
				<image class="swiper-item" :src="item" mode="aspectFill" />
			</swiper-item>
		</swiper>

		<view class="detail">
			<view class="detail-header">
				<view class="detail-title">{{ detail.name }}</view>
				<image v-if="detail.recommendType === 1" src="https://static.wddzq.com/static/jin.png"></image>
				<image v-if="detail.recommendType === 2" src="https://static.wddzq.com/static/yin.png"></image>
			</view>
			<view class="detail-type">
				<image :src="detail.categoryIcon" />
				<text>{{detail.categoryName}}</text>
			</view>
			<view class="detail-date">
				<text>营业时间：</text>
				<text style="color: #333;">{{detail.workTime}}</text>
			</view>

			<view class="detail-addr">
				<view class="detail-addr-left">
					<view class="detail-addr-title">{{detail.address}}</view>
					<view class="detail-addr-desc">{{detail.locationName}}</view>
				</view>
				<view class="detail-addr-right">
					<view class="detail-item" @click="handleMapLocation">
						<image src="https://static.wddzq.com/static/address.png" />
						<text>导航</text>
					</view>
					<view class="detail-item" @click="handlePhoneClick">
						<image src="https://static.wddzq.com/static/phone.png" />
						<text>电话</text>
					</view>
				</view>
			</view>
		</view>


		<!-- 场地简介 -->
		<view class="active-info">
			<view class="t-cell" @click="handleSexOpen">
				<view class="t-cell-content">场地简介</view>
			</view>
			<view class="shop-desc">{{detail.intro}}</view>
		</view>

    <!--  活动套餐  -->
    <view v-if="packList.length" class="pack-container">
      <view class="pack-header-wrapper">
        <image src="/static/shop-detail/ju.png" class="pack-header-icon"/>
        <text class="pack-header-text">活动套餐</text>
      </view>
      <view v-for="(item, index) in packList" class="pack-item-wrapper" @click.stop="()=>navigateToPack(item.id)">
        <image class="pack-image" :src="item.productPic"/>
        <view class="pack-item-content-wrapper">
          <text class="pack-item-content-title">{{item.productName}}</text>
          <text class="pack-item-content-des">点击查看详情</text>
          <view class="pack-item-widgets-wrapper">
            <view class="pack-item-widgets-left-wrapper">
              <view class="pack-item-widgets-left-price-wrapper">
                <text class="pack-item-widgets-left-price-unit">¥</text>
                <text class="pack-item-widgets-left-price">{{item.price}}</text>
              </view>
              <text class="pack-item-widgets-tag">补贴价</text>
              <text class="pack-item-widgets-original-price">¥{{item.originalPrice}}</text>
            </view>
            <text class="pack-item-widgets-right-button" @click.stop="()=>handleSubmitWithProductId(item)">一起组</text>
          </view>
        </view>
      </view>
    </view>

		<!-- 标签信息 -->
		<view class="active-info">
			<view class="t-cell" @click="handleSexOpen">
				<view class="t-cell-content">标签信息</view>
			</view>
			<view class="empty" v-if="tagVOListSelected.length === 0">
				<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
				<view class="empty-text">暂无数据～</view>
			</view>
			<view class="shop-tags">
				<view v-for="(tag, index) in (tagVOListSelected || [])" :key="index">
					<view v-if="index <= 2 || showMore">
						<view class="tags-tit">{{ tag.className }}</view>
						<view class="tags-con">
							<view v-for="item in (tag.tagItemVOList || [])" :key="item.value" class="tags-con-it">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="tagVOListSelected.length > 2" class="read-more" @click="handleMore">{{ showMore ? '收起全部' : '查看全部' }}</view>
		</view>

		<!-- 活动列表 -->
		<view class="active-info">
			<view class="t-cell">
				<view class="t-cell-content">列表活动</view>
			</view>
			<view class="active-list">
				<view class="empty" v-if="activeList.length === 0">
					<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
					<view class="empty-text">暂无数据～</view>
				</view>
				<view class="active-item" v-for="item in activeList" :key="item.id">
					<view class="active-header">
						<view class="active-title">{{item.title}}</view>
						<view class="active-member">
							<text>{{item.signUpCount}}/{{item.maxSignUpCount}}</text>
							<text style="color: #FF8F1F;padding-right: 16rpx;">报名中</text>
							<tui-image-group :imageList="item?.picListV2?.split('|') || []" isGroup distance="-20" borderWidth="1rpx" borderColor="#1677FF" width="60rpx" height="60rpx"></tui-image-group>
						</view>
					</view>
					<view class="active-date">{{item.dateShow}}</view>
					<view class="active-footer">
						<image class="active-admin" :src="item.userHeadPic" />
						<text class="active-admin-name">{{item.userName}}</text>
						<u-button customStyle="width: 150rpx;height: 62rpx;border-radius: 31rpx;margin: 0;font-size: 26rpx;" color="#1c1c1e" text="去报名" @click="handleDetailClick(item.id)"></u-button>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 150rpx;"></view>
		<view class="active-bottom">
			<view class="share-box">
				<button class="share-box-btn" open-type="share"></button>
				<image src="https://static.wddzq.com/static/fenxiang.png"></image>
			</view>

		  <u-button class="share-btn" @click="handleSubmit" customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 88rpx;" color="#1c1c1e">
		    <view class="share-btn-bm">一起到这玩</view>
		  </u-button>
		</view>
	</view>
</template>

<script>
	import { getMerchantDetail, getMerchantActivityPage, getProductList } from '../../config/api.js';
	import { to, getSystemInfo } from '../../config/utils.js';

	export default {
		data() {
			return {
				detail: {},
				activeList: [],
        packList: [],
				tagVOListSelected: [],
				headerHeight: 64,
				share: false,
				showMore: false,
        /// 前一个页面是publish
        previewPageIsPublish: false,
			}
		},
		onLoad(params) {
			this.params = params;

			let system = getSystemInfo();
			if(system) {
				this.headerHeight = 44 + (system.statusBarHeight || 20);
			}
		},
		onShow() {
			this.fetchActivityDetail();
			this.fetchMerchantActivityPage();
      this.fetchProductList();
		},
		onReady() {
			let pages = getCurrentPages();
      for(let i = 0; i < pages.length; i ++){
        if(pages[i].route.indexOf('pages/publish/publish') >= 0){
          this.previewPageIsPublish = true;
        }
      }
			if(pages.length <= 1) {
				this.share = true;
			}
		},

		onShareAppMessage() {
			return {
				title: this.detail?.name + '-' + this.detail?.intro,
			  path: `/pages/stop-detail/stop-detail?storeId=${this.detail?.id}`,
			  imageUrl: this.detail?.logoUrl,
			};
		},
		methods: {
      navigateToPack(productId){
        uni.navigateTo({
          url: `/pages/pack/pack?productId=${productId}`
        })
      },
			handleMore() {
				this.showMore = !this.showMore;
			},
			handleToIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			handleBack() {
				uni.navigateBack();
			},
			handlePhoneClick() {
				if(!this.detail?.tel) {
					return uni.showToast({
						title: '未获取到手机号',
						icon: "none"
					})
				}
				uni.makePhoneCall({
					phoneNumber: this.detail?.tel
				});
			},
			handleMapLocation() {
			  uni.openLocation({
			    latitude: this.detail.latitude,
			    longitude: this.detail.longitude,
			    address: this.detail.address,
			    name: this.detail.locationName
			  })
			},
			async fetchActivityDetail() {
				const [err, data] = await to(getMerchantDetail({ merchantId: this.params?.storeId }));
				if(err) {
					return uni.showToast({
						title: err?.msg || '获取场地详情失败',
						icon: 'error'
					});
				}
				if(data.success) {
					this.detail = data?.data || {};
					let result = [];
					(this.detail.tagVOList || []).forEach(item => {
						let _obj = {};
						let _selected = (item.tagItemVOList || []).filter(item => item.userSelected);
						if(_selected.length > 0) {
							_obj.className = item.className;
							_obj.tagItemVOList = _selected;
							result.push(_obj);
						}
					})
					this.tagVOListSelected = result;
					// this.tagVOListSelected = (detail?.tagVOList || []).filter(item => {
					// 	let _selected = (item.tagItemVOList || []).filter();
					// 	if(_selected.length > 0) {
					// 		return true;
					// 	}
					// 	return false;
					// })
				} else {
					return uni.showToast({
						title: data?.msg || '获取场地详情失败',
						icon: 'error'
					});
				}
			},

      async fetchProductList(){
        const [err, data] = await to(getProductList({merchantId: this.params?.storeId}));
        if(err || !data.success){
          return uni.showToast({
            title: err?.msg || '获取套餐列表失败',
            icon: 'error'
          });
        } else {
          this.packList = data?.data || [];
        }
      }
      ,

			async fetchMerchantActivityPage() {
				const [err, data] = await to(getMerchantActivityPage({ merchantId: this.params?.storeId }));
				if(err) {
					return uni.showToast({
						title: err?.msg || '获取活动列表失败',
						icon: 'error'
					});
				}
				if(data.success) {
					this.activeList = data?.data?.records || [];
				} else {
					return uni.showToast({
						title: data?.msg || '获取活动列表失败',
						icon: 'error'
					});
				}
			},

			handleMapLocation() {
			  uni.openLocation({
			    latitude: this.detail.latitude,
			    longitude: this.detail.longitude,
			    address: this.detail.address,
			    name: this.detail.locationName
			  })
			},
			handleDetailClick(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?activityId=${id}`
				})
			},
			handleSubmit() {
        if(this.previewPageIsPublish){
          uni.navigateBack();
        } else {
          uni.navigateTo({
            url: `/pages/publish/publish?categoryId=${this.detail.categoryId}&merchantId=${this.detail.id}`
          })
        }
			},
      handleSubmitWithProductId(product) {
        if(this.previewPageIsPublish){
          uni.$emit('updateProductId', {
            categoryId: this.detail.categoryId,
            merchantId: this.detail.id,
            productId: product.id,
          });
          uni.navigateBack({
            delta: 1
          });
        } else {
          uni.navigateTo({
            url: `/pages/publish/publish?productId=${product.id}`
          })
        }
      },
		}
	}
</script>

<style>
	.swiper {
		height: 440rpx;
		border-radius: 18rpx;
		overflow: hidden;
	}
	.swiper-item {
		display: block;
		width: 100%;
		height: 440rpx;
		text-align: center;
	}

	.detail {
		background-color: #fff;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		padding: 32rpx;
		margin-top: -40rpx;
		position: relative;
		z-index: 10;
	}
	.detail-header {
		display: flex;
		margin-bottom: 16rpx;
	}
	.detail-title {
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.detail-header image {
		width: 36rpx;
		height: 36rpx;
	}

	.detail-type {
		display: flex;
		margin-bottom: 18rpx;
	}
	.detail-type image {
		width: 32rpx;
		height: 32rpx;
	}
	.detail-type text {
		display: inline-block;
		height: 32rpx;
		line-height: 32rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 8rpx;
	}

	.detail-date {
		margin-bottom: 32rpx;
	}
	.detail-date text {
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
	}

	.detail-addr {
		border-top: 1rpx solid #eee;
		display: flex;
		padding-top: 24rpx;
	}
	.detail-addr-left {
		flex: 1;
	}
	.detail-addr-title {
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}
	.detail-addr-desc {
		height: 32rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;
	}
	.detail-addr-right {
		display: flex;
		align-items: center;
	}
	.detail-item {
		margin-left: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.detail-item image {
		width: 46rpx;
		height: 46rpx;
		margin-bottom: 5rpx;
	}
	.detail-item text {
		height: 24rpx;
		font-size: 18rpx;
		font-weight: 400;
		color: #999999;
		line-height: 24rpx;
	}

.active-info {
	margin: 24rpx 0rpx;
	padding: 0rpx 32rpx;
	background-color: #fff;
}

.pack-container{
  display: flex;
  flex-direction: column;
  padding: 32rpx;
  background-color: white;
  margin-bottom: 16rpx;
}

.pack-header-wrapper{
  width: 100%;
  display: flex;
  align-items: center;
  padding-bottom: 32rpx;
  border-bottom: 1rpx solid #EEEEEE;
}

.pack-header-icon{
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}

.pack-header-text{
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}
.pack-item-wrapper{
  display: flex;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #eee;
}
.pack-image{
  width: 140rpx;
  height: 140rpx;
  border-radius: 16rpx;
  margin-right: 16rpx;
}
.pack-item-content-wrapper{
  display: flex;
  flex-direction: column;
}
.pack-item-content-title{
  font-size: 26rpx;
  font-weight: bold;
  color: #333333;
}
.pack-item-content-des{
  width: 530rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24rpx;
  font-weight: 400;
  padding: 16rpx 0;
  color: #999999;
}
.pack-item-widgets-wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pack-item-widgets-left-wrapper{
  display: flex;
}
.pack-item-widgets-left-price-wrapper{
  display: flex;
  align-items: baseline;
  margin-right: 8rpx;
}
.pack-item-widgets-left-price-unit{
  font-size: 22rpx;
  font-weight: 600;
  color: #FF8F1F;
}
.pack-item-widgets-left-price{
  font-size: 34rpx;
  font-weight: 600;
  color: #FF8F1F;
}
.pack-item-widgets-tag{
  height: 34rpx;
  line-height: 34rpx;
  padding: 0 8rpx;
  background: rgba(255,143,31,0.1);
  border-radius: 8rpx;
  border: 1rpx solid rgba(255,143,31,0.3);
  font-size: 20rpx;
  font-weight: 500;
  color: #FF8F1F;
  margin-right: 8rpx;
}
.pack-item-widgets-original-price{
  font-size: 28rpx;
  font-weight: 400;
  color: #AAAAAA;
  text-decoration: line-through;
}
.pack-item-widgets-right-button{
  height: 54rpx;
  line-height: 54rpx;
  background: #030303;
  border-radius: 29rpx;
  padding: 0 24rpx;
  font-size: 26rpx;
  font-weight: 600;
  color: #FFFFFF;
}




/* 单元格 */
.t-cell {
	display: flex;
	height: 100rpx;
	align-items: center;
	border-bottom: 1rpx solid #eee;
	position: relative;
}
.t-cell.t-cell-h {
	height: 140rpx;
}
.t-cell.required::after {
	position: absolute;
	content: '*';
	font-size: 24rpx;
	color: red;
	top: 30rpx;
}
.t-cell:last-child {
	border: none;
}
.t-cell .t-cell-image {
	width: 80rpx;
	height: 80rpx;
	margin-right: 16rpx;
}
.t-cell .t-cell-content {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}
.t-cell-text {
	font-size: 28rpx;
	color: #333;
	margin-right: 16rpx;
}

.shop-desc {
	padding: 32rpx 0;
	font-size: 28rpx;
	font-weight: 400;
	color: #333333;
	line-height: 36rpx;
}

.shop-tags {}
.tags-tit {
	font-size: 24rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	margin-top: 24rpx;
	margin-bottom: 36rpx;
}
.tags-con {
	display: flex;
}
.tags-con-it {
	height: 34rpx;
	line-height: 34rpx;
	background: #FFFFFF;
	border-radius: 4rpx;
	border: 1rpx solid #D1D1D1;
	padding: 0 6rpx;
	font-size: 22rpx;
	font-weight: 400;
	color: #666666;
	margin-right: 16rpx;
	margin-bottom: 16rpx;
}

.read-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rpx 0;
	font-size: 28rpx;
	font-weight: 400;
	color: #0074FC;
}

.active-list {
	padding-bottom: 30rpx;
}
.active-item {
	padding: 14rpx 16rpx 26rpx 16rpx;
	border: 1rpx solid #EEEEEE;
	border-radius: 18rpx;
	margin-top: 32rpx;
}
.active-item .active-header {
	display: flex;
	align-items: center;
}
.active-title {
	flex: 1;
	height: 50rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #333333;
	line-height: 50rpx;
	margin-bottom: 16rpx;
}
.active-member {
	display: flex;
	align-items: center;
}
.active-member text {
	height: 33rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 33rpx;
}
.active-date {
	height: 32rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 32rpx;
	margin-bottom: 16rpx;
}
.active-footer {
	display: flex;
	align-items: center;
}
.active-footer .active-admin {
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;
	margin-right: 8rpx;
}
.active-footer .active-admin-name {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}


	.active-bottom {
		display: flex;
		padding-left: 64rpx;
		padding-right: 48rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx 48rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0,0,0,0.02);
		z-index: 1000;
	}
	.share-box {
		display: flex;
		flex-direction: column;
		margin-right: 66rpx;
		position: relative;
	}
	.share-box image {
		width: 44rpx;
		height: 44rpx;
		margin-bottom: 4rpx;
		margin-top: 15rpx;
	}
	.share-box text {
		font-size: 24rpx;
		color: #666;
	}
	.share-box-btn {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.share-btn {
		flex: 1;
	}
	.share-btn-bm {
    margin-left: 60rpx;
    margin-right: 60rpx;
		font-size: 28rpx;
		color: #fff;
	}

</style>
